<template>
<!-- 技术-专家委员会 -->
  <base-breadcrumb>
    <searchData :search-data="searchArr" @search="search" />
    <a-card :bordered="false">
      <div style="display: flex">
        <!-- 左边结构 -->
        <div style="width: 350px; border-right: 1px solid #ccc">
          <div class="font mb12">专家委员会</div>
          <!-- 查询框 -->
          <a-input-search class="mb12" style="width: 260px" @search="onSearch" />
          <!-- 中间主体结构 -->
          <a-spin :spinning="spinning">
            <div v-for="item in expertList" :key="item.expertGroupId">
              <a-button
                class="mb12"
                :type="queryParam.expertTypeId == item.expertGroupId ? 'primary' : 'default'"
                style="width: 100%"
                @click="getGroup(item)"
              >
                {{ item.expertGroupName }}
                <span v-if="item.status == '0'" class="del_btn">(停用)</span>
              </a-button>
            </div>
            <empty v-if="expertList.length < 1" description="暂无专家信息" />
          </a-spin>
          <div style="display: flex; justify-content: space-around">
            <a-button v-btnPermission="'stm_002_addt_01'" type="primary" @click="showAdd()"> 新增 </a-button>
            <a-button
              v-btnPermission="'stm_002_edit_02'"
              v-if="hideBuquBtn()"
              :disabled="queryParam.expertTypeId == ''" type="primary" @click="showEdit()">编辑
            </a-button>
            <a-button
              v-if="editForm.status == 1&&hideBuquBtn()"
              v-btnPermission="'stm_002_clot_03'"
              :disabled="queryParam.expertTypeId == ''" type="danger" @click="showDeleteConfirm">
              禁用
            </a-button>
            <a-button
              v-if="editForm.status == 0&&hideBuquBtn()"
              v-btnPermission="'stm_002_opet_04'" type="primary" :disabled="queryParam.expertTypeId == ''"
              @click="showStartConfirm">启用
            </a-button>
          </div>
        </div>
        <!-- 右边表格 -->
        <div style="margin-left: 10px; width:calc(100% - 280px)">
          <list-table
            ref="table"
            class="export-table"
            :columns="columns"
            :startIndex="0"
            :request="loadData"
            :export-config="{ use: true, select: '专家委员会', all: '专家委员会',customColumns: customColumns}"
            :export-permission="{select: 'tm_013_exp_06',all: 'tm_013_exp_06'}">
            <template slot="prefix" slot-scope="record">
<!--              v-btnPermission="'stm_002_add_05'"-->
              <a-button type="primary" @click="handleManage(2)" v-btnPermission="'stm_002_dela_06'">添加人员</a-button>
              <a-button :disabled="record.selectedRowKeys && record.selectedRowKeys.length === 0"  type="danger" @click="handleEdit(record.selectedRowKeys)"  v-btnPermission="'stm_002_dela_06'">移除</a-button>
            </template>
            <!-- 操作 -->
              <template slot="action" slot-scope="text, record">
                <MoreButton>
                <a @click="handleManage(0, record)" v-btnPermission="'tm_013_loo_04'">查看</a>
                <template v-btnPermission="'tm_013_edi_02'" v-if="hideBuquBtn()">
                    <a @click="handleManage(1, record)">编辑</a>
                    </template>
                    <template v-btnPermission="'tm_013_del_03'" v-if="hideBuquBtn()">
                      <a @click="handleEdit(record)">删除</a>
                  </template>
                </MoreButton>
                </template>

          </list-table>
        </div>
      </div>
      <a-modal
        :title="this.form.expertGroupId ? '编辑专家组' : '新增专家组'"
        :visible="groupAdd"
        :confirm-loading="confirmLoading"
        width="500px" @ok="addExpertGruop"
        @cancel="handleCancelGroup">
        <div>
          <a-form-model
            ref="expertGroupBox"
            :model="form"
            :rules="{
              expertGroupName: [{required: true,message: '请输入专家组名称',trigger: 'change'}]}">
            <a-form-model-item
              label="专家组名称"
              prop="expertGroupName"
              :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
              <BaseInput v-model.trim="form.expertGroupName" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item
              label="备注"
              :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
              <BaseInput v-model.trim="form.remarks" placeholder="请输入" />
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-modal>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import { Empty } from 'ant-design-vue' // 无数据提示
import { getAllBranchCompany } from '@/api/commons'
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import {
  // getExpertList,
  stopExpertGruop,
  getExpertGroup,
  getExpertGroupExcept,
  addExpertMembers,
  deleteExpertMember,
  addExpertGruop,
  editExpertGruop,
  getEmployeeList
} from '@/api/science'
import ARow from 'ant-design-vue/es/grid/Row'
import {getExpertLsit,delExpert} from '@/api/technical/expert'

const columns = [
  {title: '姓名',ellipsis: true,dataIndex: 'expertName',width: '120px',},
  {title: '所属组织机构',ellipsis: true,dataIndex: 'supportOrgName',width: '150px',},
  {title: '所属项目',ellipsis: true,dataIndex: 'projectName',ellipsis: true,width: '150px',},
  {title: '职务',ellipsis: true,dataIndex: 'jobTitle',width: '250px',},
  {title: '职称',ellipsis: true,dataIndex: 'jobName',width: '150px',},
  {title: '状态 ',dataIndex: 'jobStatus',width: '120px',},
  {title: '入组时间',ellipsis: true,dataIndex: 'inTime',width: '150px',},
  {title: '备注',ellipsis: true,dataIndex: 'remark',width: '300px',},
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
const customColumns = columns.slice(0,7);
const expertType =[  {title: '专家类别',ellipsis: true,dataIndex: 'expertType',width: '200px'},{title: '备注',ellipsis: true,dataIndex: 'remark',width: '300px'}]
export default {
  name: 'a' + Date.now(),
  components: {
    ARow,
    STable,
    Empty,
    SelectProject
  },
  data() {
    this.columns = columns
    this.customColumns = [...customColumns,...expertType]
    return {
      key: '', // 关键词
      selectOptions: {},
      spinning: false,
      visible: false,
      groupAdd: false,
      employeeName: '',
      org: [],
      editForm: {
        status: '1'
      },
      expertObj:{
        expertType:'',
        expertTypeId:''
      },
      form: {
        expertGroupName: '',
        remarks: ''
      },
      persons: [],
      delId: [],
      companyList: [],
      advanced: false,
      confirmLoading: false,
      mdl: null,
      IDs: '',
      // 查询参数
      queryParam: {
        //expertGroupId: ''
        expertTypeId:''
      },
      init: true,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let that = this
        const requestParameters = Object.assign({}, parameter, { query: that.queryParam })
        if (!this.editForm.expertGroupId) {
          if (!this.init) {
            this.$message.warning('请先选择专家！')
          }
          return false
        } else {
          return getExpertLsit(requestParameters).then((res) => {
            if (this.selectedRowKeys.length > 0) {
              this.$refs.table.clearSelected()
            }
            this.init = false
            return res
          })
        }
      },
      expertList: [],
      selectedRowKeys: [],
      selectedRows: [],
      selectedKeys: []
    }
  },
  created() {
    this.getExpertGroup()
    this.querCompany()
  },
  computed: {
    searchArr() {
        return [
         // 搜索框
         {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
      //  {name: '所属组织机构',value: 'branchComId',placeholder: '请选择',type: 'select', data: this.companyList},
      //  {name: '所属项目',placeholder: '请选择',valueKey: 'projectId',keyValue: 'branchComId',type: SelectProject,isSelf:false,},
       {name: '姓名',value: 'expertName',type: 'input',},
       {name: '职务',value: 'jobTitle',type: 'input',},
       {name: '职称',value: 'jobName',type: 'input',},
        ]
      }
  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.$refs.treeOrganization.getList().then((res) => {
            // to do
            this.$refs.tables.refresh(true)
          })
        })
      }
    }
  },

  methods: {
        querCompany() {
          return getAllBranchCompany({tagCodes: ['BC']}).then((res) => {
            let co = [{
              id: "53085e2c9f1f4685801ef31994f57c49",
              name: "总部机关",
            }]
           res.data = [ ...co, ...res.data ];
        let datas = res.data.map((item, index) => {
          return { label: item.name, value: item.id }
        })
        this.companyList = datas
        })
        },
    // 操作栏
      handleManage(type, record) {
          let query = {
              editModel: type,
              expertType:this.expertObj.expertType,
              expertTypeId:this.expertObj.expertTypeId
          }
          if (record && record.id) {
              query.id = record.id
              query.expertId = record.expertId
          }
          this.$router.push({
              name: 'updateExpert',
              query
          })
      },
    getExpertLsit() {
      getExpertLsit({ type: 0 }).then((res) => {
        console.log(res.data)
      })
    },
    getGroup(value) {
      this.editForm = value
      this.queryParam.expertTypeId = value.expertGroupId
      this.expertObj.expertTypeId = value.expertGroupId
      this.expertObj.expertType	 = value.expertGroupName
      this.$refs.table.refresh(true)
    },
    addExpertGruop(form) {
      this.$refs.expertGroupBox.validate((val) => {
        if (val) {
          this.confirmLoading = true
          if (this.form.expertGroupId === undefined) {
            addExpertGruop(this.form)
              .then((res) => {
                this.confirmLoading = false
                if (res.data.code == 200) {
                  this.$message.success('新增成功')
                  this.groupAdd = false
                  this.getExpertGroup()
                }
              })
              .catch((res) => {
                this.confirmLoading = false
              })
          } else {
            editExpertGruop(this.form)
              .then((res) => {
                this.confirmLoading = false
                if (res.data.code == 200) {
                  this.$message.success('修改成功')
                  this.groupAdd = false
                  this.getExpertGroup()
                }
              })
              .catch((res) => {
                this.confirmLoading = false
              })
          }
        }
      })
    },
    getTableDatas() {
      this.$refs.tables.refresh(true)
    },
    showDeleteConfirm() {
      let _this = this
      _this.$confirm({
        title: '警告提示?',
        content: '是否将此专家组禁用',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          return stopExpertGruop({
            expertGroupId: _this.editForm.expertGroupId
          }).then((res) => {
            if (res.data.code == 200) {
              _this.getExpertGroup()
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    showStartConfirm() {
      let that = this
      that.$confirm({
        title: '警告提示?',
        content: '是否将此专家组启用',
        okText: '确定',
        okType: 'success',
        cancelText: '取消',
        onOk() {
          return stopExpertGruop({
            expertGroupId: that.editForm.expertGroupId
          }).then((res) => {
            if (res.data.code == 200) {
              that.getExpertGroup()
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    showEdit() {
      this.form = Object.assign({}, this.editForm)
      this.groupAdd = true
    },
    showAdd() {
      this.form = {}
      this.groupAdd = true
    },
    getExpertGroup() {
      this.spinning = true
      getExpertGroup()
        .then((res) => {
          this.spinning = false
          if (res.code == 200 && res.data.length > 0) {
            this.expertList = res.data
            if (this.queryParam.expertTypeId) {
              this.editForm = [...res.data].filter((item) => item.expertGroupId == this.queryParam.expertTypeId)[0]
            } else {
              this.queryParam.expertTypeId = res.data[0].expertGroupId
              this.expertObj.expertTypeId = res.data[0].expertGroupId
              this.expertObj.expertType = res.data[0].expertGroupName;
              this.editForm = res.data[0]
              this.$nextTick(this.search)
            }
          }
        })
        .catch((res) => {
          this.spinning = false
        })
    },
    onSearch(value) {
      this.spinning = true
      getExpertGroup({ expertGroupName: value })
        .then((res) => {
          this.spinning = false
          this.expertList = res.data
          // console.log('专家组列表：' + res.data)
        })
        .catch((res) => {
          this.spinning = true
        })
    },
    showModal() {
      this.visible = true
    },
    search(val) {
      if (val) {
        this.queryParam = Object.assign({ expertTypeId: this.queryParam.expertTypeId }, val)
      }
      this.$refs.table.refresh(true)
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      this.visible = false
    },
    handleEdit(record) {
      let _self = this
      this.$confirm({
        title: '警告提示!',
        content: '是否确认选中员工从专家组中移除?',
        okText: '确定',
        okType: 'success',
        cancelText: '取消',
        onOk() {
          if (_self.editForm.expertGroupId === undefined) {
            _self.editForm.expertGroupId = _self.expertList[0].expertGroupId
          }
          let delId = [];
          if(Array.isArray(record)){
            delId = record;
          }else{
            delId[0] = record.id;
          }
          return delExpert({ids: delId}).then((res) => {
              if (res.data.code === 200) {
                _self.$refs.table.loadData()
                _self.$message.success('移除成功！')
              }
            })
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    handleCancelGroup() {
      this.$refs.expertGroupBox.resetFields()
      this.groupAdd = false
    },
  }
}
</script>
<style scoped>
.sprite {
  background-color: #fafafa;
  height: 550px;
  width: 1px;
}
.item {
  background-color: #fafafa;
  height: 400px;
  width: 100%;
  padding: 10px;
}
.sideItem {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
}
.sideItem:hover {
  background: #aaa;
}
.input {
  border-radius: 10px;
}
.font {
  font-weight: bold;
}
.expert {
  background-color: #eee;
  height: 300px;
  padding: 10px;
  text-align: center;
}
.selects {
  background-color: #e6f3fc;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #d4f0fc;
  border-radius: 4px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 12px;
  text-align: left;
  line-height: 18px;
  padding: 5px 10px;
}

.tag {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #000;
  background-color: #fff;
}
.tag:visited {
  color: #0e7ed0;
}
</style>
